<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../swiper/swiper-bundle.min.css">
</head>

<body>
    <div class="bigbox">
        <div class="nav" id="nav">
            <div class="navleft">
                <img src="../img/logonew.png" width="120px" height="45px">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="../html/酷玩.html">酷玩</a></li>
                    <li><a href="../html/导购.html">导购</a></li>
                    <li><a href="../html/试用.html">试用</a></li>
                    <li><a href="../html/报告.html">报告</a></li>
                </ul>
            </div>
            <div class="navright">
                <img src="../img/search.png" alt="">
                <ul>
                    <li><a href="#">注册</a></li>
                </ul>
            </div>
        </div>
        <div class="wap">
            <img src="../img/original.jpg" width="100%">
            <div class="baner-right">
                <h3>幻想小贝HiFi2.1音响</h3>
                <p class="apply">
                    <span>126人申请</span>
                    <span>￥599</span>
                    <span>20台</span> 
                </p>
                <p class="wapp">申请时间剩余：<span id="showtime"></span></p>
                <button class="btnn">立即申请</button>
            </div>
        </div>

        <!-- 热门试用 -->
        <div class="swiper">
            <p class="p">热门试用</p>
            <div class="swiper-wrapper">
            </div>

            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <!-- 精选报告 -->
        <div class="selected">
            <div class="seltop">
                <p class="p">精选报告</p>
                <button class="btn">查看更多
                    <img src="../img/readMore.png" alt="">
                </button>
            </div>
            <div class="sel">

            </div>
        </div>
        <!-- 导购精选 -->
        <div class="guide">
            <div class="seltop">
                <p class="p">导购精选</p>
                <button class="btn1">查看更多
                    <img src="../img/readMore.png" alt="">
                </button>
            </div>
            <div class="gutop">

            </div>
        </div>
        <!-- 加载更多 -->
        <div class="load">
            <a href="#"><img id='img' src="../img/more.png" alt="" width="20px">加载更多</a>
        </div>
        <!-- 底部 -->
        <div class="bottomnav">
            <img src="../img/code.png" alt="" class="aimg">
            <!-- <img src="../img/logoImg.jpg" alt=""> -->
            <div class="dl">
                <dl>
                    <dt><img src="../img/logoImg.jpg" alt=""></dt>
                    <dd>全球酷玩试用导购平台<br>
                        酷·新奇·好玩·品质 </dd>
                    <dd>微信添加“JguoJguo”<br>
                        获取我们的服务。
                    </dd>
                </dl>
                <dl>
                    <dt>免费试用</dt>
                    <dd>试用流程 </dd>
                    <dd>如何提高成功率</dd>
                </dl>
                <dl>
                    <dt>友情链接</dt>
                    <dd>智东西 WEIBUSI</dd>
                    <dd>搜狐IT 腾讯科技</dd>
                    <dd>搜狐数码 凤凰科技</dd>
                    <dd>凤凰数码 PConline</dd>
                    <dd>泡泡网 3W咖啡</dd>
                    <dd>ZUK社区 亿觅emie</dd>
                    <dd>极客公园 易迅易启玩</dd>
                    <dd>果库</dd>
                </dl>
                <dl>
                    <dt>购买攻略</dt>
                    <dd>美亚海淘教程</dd>
                    <dd>日亚海淘教程</dd>
                    <dd>海淘转运攻略</dd>
                    <dd>kickstarter 众筹购买攻略</dd>
                    <dd>indiegogo 众筹购买攻略</dd>
                </dl>
                <dl>
                    <dt>厂商合作</dt>
                    <dd>关于极果 </dd>
                    <dd>联系我们</dd>
                    <dd>商务合作：BD@jiguo.com </dd>
                    <dd>CEO邮箱：CEO@jiguo.com</dd>
                </dl>
            </div>
            <a href="#nav"><img src="../img/back.png" alt="" class="bimg"></a>
            <p id="pp">? 2016 极果版权所有</p>
        </div>
    </div>
</body>

</html>
<script src="../swiper/swiper-bundle.min.js"></script>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    // 热门试用
    $.ajax({
        url: 'http://localhost:3000/useing/public',
        type: 'get',
        success(data) {
            // console.log(data);
            var str = ""
            for (var i = 0; i < data.length; i++) {
                str += "<div class=swiper-slide>";
                str += "<img  class=lunboimg src=" + data[i].img + ">";
                str += "<p class=lunp>" + data[i].text + "</p>"
                str += "<span class=lunspan>" + data[i].uName + "<span>";
                str += "</div>"
            }
            $('.swiper-wrapper').html(str)
            // $('.swiper-slide').html(str)
            var mySwiper = new Swiper('.swiper', {
                slidesPerView: 4,
                loop: true, // 循环模式选项
                speed: 500,
                autoplay: {
                    delay: 1000
                },

                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                // 如果需要滚动条
                scrollbar: {
                    el: '.swiper-scrollbar',
                },
            })

        }

    });

    //精选报告
    var str2 = '';
    for (var i = 1; i < 12; i++) {
        str2 += '<div class=selimg>';
        str2 += "<img class=img2 src ='../img/bg" + i + ".jpg'>";
        str2 += '<p>空气净化器里面学问惊呆你，你选对了吗？</p>';
        str2 += '<span class=selspan>.苏苏&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<img src="../img/zan.png"/>3<img src="../img/reply.png"/>3</span>';
        str2 += '</div>'
    }
    $('.sel').html(str2);
    $('.btn').click(function () {
        // $(".sel2").toggle();  
        if ($(".sel").css('height') == '500px') {
            $(".sel").css('height', '800px')
        } else if ($(".sel").css('height') == '800px') {
            $(".sel").css('height', '500px')
        }
    })
    // 导购精选 
    var str3 = '';
    for (var i = 1; i < 5; i++) {
        str3 += '<div class=selimg1>';
        str3 += "<img class=img2 src ='../img/detail" + i + ".jpg'>";
        str3 += '<p>空气净化器里面学问惊呆你，你选对了吗？</p>';
        str3 += '<span class=selspan>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<img src="../img/zan.png"/>3<img src="../img/reply.png"/>3</span>';
        str3 += '</div>'
    }
    $('.gutop').html(str3);

    function animateIt() {
        $('.load a').slideToggle(1000, animateIt)
    }
    animateIt()

    var showtime = function () {
    var nowtime = new Date(),  //获取当前时间
        endtime = new Date("2022/9/10");  //定义结束时间
    var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
        leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
        lefth = Math.floor(lefttime/(1000*60*60)%24),  //计算小时数
        leftm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
        lefts = Math.floor(lefttime/1000%60);  //计算秒数
        return leftd + "天" + lefth + ":" + leftm + ":" + lefts;  //返回倒计时的字符串
}

var div = document.getElementById("showtime");
setInterval (function () {
    div.innerHTML = showtime();
}, 1000);  //反复执行函数本身
</script>